<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>基于Ajax灾区物资运输管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">个人中心</div>
                <div class="layui-card-body ">
                    <form class="layui-form">
                        <input type="hidden" id="accountName" name="accountName">
                        <div class="layui-form-item">
                            <label for="id" class="layui-form-label">
                                <span class="x-red">*</span>用户ID</label>
                            <div class="layui-input-inline">
                                <input type="text" id="id" name="id" lay-verify="required"
                                       autocomplete="off" class="layui-input" readonly></div>
                            <div class="layui-form-mid layui-word-aux">
                                <span class="x-red">*</span>系统自动生成
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="id" class="layui-form-label">
                                <span class="x-red">*</span>真实姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="accountRealName" name="accountRealName" lay-verify="required"
                                       autocomplete="off" class="layui-input"></div>
                            <div class="layui-form-mid layui-word-aux">
                                <span class="x-red">*</span>请填写自己的真实姓名
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="accountPassword" class="layui-form-label">
                                <span class="x-red">*</span>密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="accountPassword" name="accountPassword" lay-verify="required"
                                       autocomplete="off" class="layui-input" placeholder="请输入密码"></div>
                            <div class="layui-form-mid layui-word-aux">
                                <span class="x-red">*</span>密码长度不少于6位,需加入数字, 英文, 特殊符号
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="accountSex" class="layui-form-label">
                                <span class="x-red">*</span>性别</label>
                            <div class="layui-input-inline">
                                <select name="accountSex" lay-verify="required" id="accountSex">
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="accountBirthday" class="layui-form-label">
                                <span class="x-red">*</span>出生日期</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text"  autocomplete="off" name="accountBirthday" id="accountBirthday" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item x-city" id="start">
                            <label class="layui-form-label"><span class="x-red">*</span>所在地</label>
                            <div class="layui-input-inline">
                                <select name="province" lay-filter="province" id="province">
                                    <option value="">请选择省</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="city" lay-filter="city" id="city">
                                    <option value="">请选择市</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="area" lay-filter="area" id="area">
                                    <option value="">请选择县/区</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="accountTel" class="layui-form-label">
                                <span class="x-red">*</span>电话</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text"  autocomplete="off" name="accountTel" id="accountTel" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="accountEmail" class="layui-form-label">
                                <span class="x-red">*</span>邮箱</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text"  autocomplete="off" name="accountEmail" id='accountEmail' lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="accountTelTemp" class="layui-form-label">
                                <span class="x-red">*</span>备用联系方式</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text"  autocomplete="off" name="accountTelTemp" id="accountTelTemp">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="accountPasswordProtectFir" class="layui-form-label">
                                <span class="x-red">*</span>密保问题1</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text"  autocomplete="off" name="accountPasswordProtectFir" id="accountPasswordProtectFir">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="accountPasswordAnswerFir" class="layui-form-label">
                                <span class="x-red">*</span>答案1</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text"  autocomplete="off" name="accountPasswordAnswerFir" id="accountPasswordAnswerFir">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="accountPasswordProtectSec" class="layui-form-label">
                                <span class="x-red">*</span>密保问题2</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text"  autocomplete="off" name="accountPasswordProtectSec" id="accountPasswordProtectSec" >
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="accountPasswordAnswerSec" class="layui-form-label">
                                <span class="x-red">*</span>答案2</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" type="text"  autocomplete="off" name="accountPasswordAnswerSec" id="accountPasswordAnswerSec" >
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_username" class="layui-form-label"></label>
                            <button class="layui-btn" lay-filter="add" lay-submit="">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/xcity.js"></script>
<script>
    layui.use(['form', 'code', 'laydate', 'layer'], function(){
        form = layui.form;
        var layer = layui.layer;
        layui.code();
        var laydate = layui.laydate;

        var account = JSON.parse(window.sessionStorage.getItem("account"));

        $("#id").val(account.id); // 账号
        $("#accountName").val(account.accountName); // 账号名
        $("#accountRealName").val(account.accountRealName); // 真实姓名
        $("#accountSex > option").each(function (i, e) { // 性别
            var strSex = $(this).val();
            if(strSex == account.accountSex) {
                $(this).attr('selected', 'true');
            }
        });
        $("#accountBirthday").val(account.accountBirthday == null? '' : account.accountBirthday); // 出生
        var address = account.accountBirthplace == null ? "" : account.accountBirthplace.split("/"); // 所在地
        $("#accountTel").val(account.accountTel); // 电话
        $("#accountEmail").val(account.accountEmail); // 邮箱
        $("#accountTelTemp").val(account.accountTelTemp); // 备用联系方式
        $("#accountPasswordProtectFir").val(account.accountPasswordProtectFir); // 密保问题1
        $("#accountPasswordAnswerFir").val(account.accountPasswordAnswerFir);   // 密保答案1
        $("#accountPasswordProtectSec").val(account.accountPasswordProtectSec); // 密保问题2
        $("#accountPasswordAnswerSec").val(account.accountPasswordAnswerSec);   // 密码答案2

        // 执行一个laydate实例
        laydate.render({
            elem: '#accountBirthday' //指定元素
        });
        if(address.length == 0) {
            $('#start').xcity();
        } else {
            $('#start').xcity(address[0], address[1], address[2]);
        }

        // 数据提交
        form.on('submit(add)', function(data) {
            var accountBirthplace = data.field.province + "/" + data.field.city + "/" + data.field.area;
            data.field.accountBirthplace = accountBirthplace;
            var btn = $(this);
            btn.text("数据提交中...").attr("disabled", "disabled").addClass("layui-disabled");
            $.ajax({
                url: './account/editAccount',
                type: 'post',
                data: data.field,
                dataType: 'json',
                success: function(res) {
                    layer.msg(res.msg, {icon: 6});
                    btn.text("提交").attr("disabled", false).removeClass("layui-disabled");
                },
                error: function () {
                    btn.text("提交").attr("disabled", false).removeClass("layui-disabled");
                    layer.msg("服务器异常...");
                }
            })
            return false;
        });
    });

    $(function() {
        // init();
    });

    function init() {
        var account = JSON.parse(window.sessionStorage.getItem("account"));
        $("#id").val(account.id); // 账号
        $("#accountName").val(account.accountName); // 账号名
        $("#accountSex > option").each(function (i, e) { // 性别
            var strSex = $(this).val();
            if(strSex == account.accountSex) {
                $(this).attr('selected', 'true');
            }
        });
        $("#accountBirthday").val(account.accountBirthday); // 出生
        $("#accountTel").val(account.accountTel); // 电话
        $("#accountEmail").val(account.accountEmail); // 邮箱
        $("#accountTelTemp").val(account.accountTelTemp); // 备用联系方式
        $("#accountPasswordProtectFir").val(account.accountPasswordProtectFir); // 密保问题1
        $("#accountPasswordAnswerFir").val(account.accountPasswordAnswerFir);   // 密保答案1
        $("#accountPasswordProtectSec").val(account.accountPasswordProtectSec); // 密保问题2
        $("#accountPasswordAnswerSec").val(account.accountPasswordAnswerSec);   // 密码答案2
    }
</script>
</html>
